<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	$(function() {
		$('#container').highcharts({
			chart : {
				type : 'column'
			},
			title : {
				text : 'Stacked column chart'
			},
			xAxis : {
				categories : [ 'Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas' ]
			},
			yAxis : {
				min : 0,
				title : {
					text : 'Total fruit consumption'
				},
				stackLabels : {
					enabled : true,
					style : {
						fontWeight : 'bold',
						color : (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
					}
				}
			},
			legend : {
				align : 'right',
				x : -100,
				verticalAlign : 'top',
				y : 20,
				floating : true,
				backgroundColor : (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
				borderColor : '#CCC',
				borderWidth : 1,
				shadow : false
			},
			tooltip : {
				formatter : function() {
					return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal;
				}
			},
			plotOptions : {
				column : {
					stacking : 'normal',
					dataLabels : {
						enabled : true,
						color : (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
					}
				}
			},
			series : [ {
				name : 'John',
				data : [ 5, 3, 4, 7, 2 ]
			}, {
				name : 'Jane',
				data : [ 2, 2, 3, 2, 1 ]
			}, {
				name : 'Joe',
				data : [ 3, 4, 4, 2, 5 ]
			} ]
		});
	});
</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
